let mysong=document.querySelector("#mysong");
let mainControl = document.querySelector("#mainControl");
let stopControl = document.querySelector("#stopControl");
let leftControl = document.querySelector(".leftControl");
let rightControl = document.querySelector(".rightControl");
let voiceEmp = document.querySelector(".voiceEmp");
let voiceFull = document.querySelector(".voiceFull");
let musicSource = document.querySelector(".musicSource");
let songName = document.querySelector("#songName");
let isPlaying = true;
let songNamelist = ['爱要坦荡荡','北京北京','离不开你','感恩的心'];
let songlist = ['./music/爱要坦荡荡.mp3','./music/北京北京.mp3','./music/离不开你.mp3','./music/感恩的心.mp3'];
let i = 0;
//页面加载自动加载第一首歌曲
window.onload = function(){
    musicSource.src = songlist[i];
    mysong.load();
    songName.innerHTML = songNamelist[i];
}
//自动下一首
mysong.addEventListener("ended",function(){
    i++;
    musicSource.src =songlist[i];
    songName.innerHTML = songNamelist[i];
    mysong.load();
    mysong.play();
},false);
timeSpan();
//播放
mainControl.addEventListener("click",function(){
    mysong.play();
    stopControl.style.display = "";
    mainControl.style.display = "none"
});
//暂停
stopControl.addEventListener("click",function(){
    mysong.pause();
    mainControl.style.display = "";
    stopControl.style.display = "none"
});
//上一首
leftControl.addEventListener("click",function(){
   let song;
   i>0?-- i : i=songlist.length-1;
   musicSource.src = songlist[i];
   songName.innerHTML = songNamelist[i];
   console.log(musicSource.src);
   mysong.load();
   mysong.play();
   console.log('正在播放第'+(i+1)+'首');
   let t = i+1;
});
//下一首
rightControl.addEventListener("click",function(){
    mysong.pause();
    if(++i>songlist.length-1){
        i = 0;
    }
    musicSource.src = songlist[i];
    songName.innerHTML = songNamelist[i];
    console.log(songlist[i]);
    mysong.load();
    mysong.play();
    console.log('正在播放第'+(i+1)+'首');
   
});

/*leftControl.addEventListener("click",function(){
    mysong.currentTime -= 10;
});
rightControl.addEventListener("click",function(){
    mysong.currentTime += 10;
});快进与倒退*/
//声音最大与禁音
voiceEmp.addEventListener("click",function(){
    mysong.volume =0;
});
voiceFull.addEventListener("click",function(){
    mysong.volume =1;
});
//时间转化
function timeDisplay(time){
    let minutes = parseInt(time/60);
    let seconds = parseInt(time%60);
    minutes = minutes<10?"0"+minutes:minutes;
    seconds = seconds<10?"0"+seconds:seconds;
    return minutes+":"+seconds;
}
//进度条与时间变化
function timeSpan(){
    setInterval(function(){
        let songTime = document.querySelector("#songTime");
        let currentTime = mysong.currentTime;
        let duration = mysong.duration;
        let process = document.querySelector("#process");
        let processYet = document.querySelector("#processYet");
        songTime.innerHTML = timeDisplay(currentTime)+"&nbsp;|&nbsp;"+timeDisplay(duration);
        processYet.style.width = (currentTime/duration)*getWidth("#process")+"px";
    },1000);
}
function getWidth(domId){
    let dom = document.querySelector(domId);
    let domWidth = dom.style.width;
    let domWidthInt = domWidth.split("px")[0];    
    return domWidthInt;
}